<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
    <title></title>
    <link href="../../css/lanai-ui.css" rel="stylesheet"/>
</head>
<body>
<section class="content no-padding">
    <div class="box box-widget no-shadow">
        <div class="box-body">
            <blockquote class="bg-gray-light blockquote-danger">
                <small>注意 : 验证采用bootstrap Validator，请自行官网下载。</small>
            </blockquote>
            <form id="form1" role="form">
                <h3>文本显示</h3>
                <div class="row">
                    <div class="col-sm-3 border-right">
                        <h1><code>h1</code>. Lanai</h1>
                        <h2><code>h2</code>. Lanai</h2>
                        <h3><code>h3</code>. Lanai</h3>
                        <h4><code>h4</code>. Lanai</h4>
                        <h5><code>h5</code>. Lanai</h5>
                        <h6><code>h6</code>. Lanai</h6>
                    </div>
                    <div class="col-sm-3 border-right">
                        <p class="lead">Lanai 强调文字加黑显示 <code>.lead</code></p>
                        <p>以下使用样式<code>.text-*</code></p>
                        <p class="text-green">Lanai 文本颜色 <code>.text-green</code></p>
                        <p class="text-aqua">Lanai 文本颜色 <code>.text-aqua</code></p>
                        <p class="text-light-blue">Lanai 文本颜色 <code>.text-light-blue</code></p>
                        <p class="text-red">Lanai 文本颜色 <code>.text-red</code></p>
                        <p class="text-yellow">Lanai 文本颜色 <code>.text-yellow</code></p>
                        <p class="text-muted">Lanai 文本颜色 <code>.text-muted</code></p>
                    </div>
                    <div class="col-sm-3 border-right">
                        <h5>圆角按钮</h5>
                        <div class="form-group">
                            <div class="input-group input-group-sm">
                                <span class="label-control label-default">.label-control .label-default</span>
                                <div class="input-group-btn">
                                    <button class="btn btn-default">.btn .btn-default</button>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="label-control label-success"> .label-success</span>
                                <div class="input-group-btn">
                                    <button class="btn btn-danger">.btn-danger</button>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="input-group input-group-lg">
                                <span class="label-control label-primary">.label-primary</span>
                                <div class="input-group-btn">
                                    <button class="btn btn-success">.btn-success</button>
                                </div>
                            </div>
                        </div>
                        <h5>平角按钮</h5>
                        <p><code>.no-radius</code>样式<br/><code>.no-raduis-childs</code>会去掉所有子元素的圆角设定</p>
                        <div class="form-group">
                            <div class="input-group">
                                <span class="label-control label-default">.label-primary</span>
                                <div class="input-group-btn">
                                    <button class="btn btn-success no-radius">.btn-success</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3"></div>
                </div>
                <h3>简单输入框<code>.form-control</code></h3>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="demo-lg">超大输入框<code>.input-lg</code></label>
                            <input class="form-control input-lg" id="demo-lg" placeholder="请输入内容..." type="text">
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="demo-default">默认输入框</label>
                            <input class="form-control" id="demo-default" placeholder="请输入内容..." type="text">
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="demo-sm">超小输入框<code>.input-sm</code></label>
                            <input class="form-control input-sm" id="demo-sm" placeholder="请输入内容..." type="text">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="demo-disabled">禁用输入框<code>disabled</code>属性</label>
                            <input class="form-control" disabled="" id="demo-disabled" placeholder="请输入内容 ..."
                                   type="text">
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="demo-password">密码输入框（必填项)</label>
                            <input class="form-control" id="demo-password" name="demopassword" placeholder="请输入密码 ..."
                                   type="password">
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="demo-select">普通下拉表</label>
                            <select class="form-control" id="demo-select">
                                <option>Java</option>
                                <option>C#</option>
                                <option>PHP</option>
                            </select>
                        </div>
                    </div>
                </div>
                <h3>多选&单选</h3>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <div class="checkbox checkbox-inline">
                                <input checked id="checkbox1" type="checkbox">
                                <label for="checkbox1">
                                    默认样式
                                </label>
                            </div>
                            <div class="checkbox checkbox-inline checkbox-primary">
                                <input checked id="checkbox2" type="checkbox">
                                <label for="checkbox2">
                                    常用<code>.checkbox-primary</code>
                                </label>
                            </div>
                            <div class="checkbox checkbox-inline checkbox-success">
                                <input checked id="checkbox3" type="checkbox">
                                <label for="checkbox3">
                                    成功<code>.checkbox-success</code>
                                </label>
                            </div>
                            <div class="checkbox checkbox-inline checkbox-info">
                                <input checked id="checkbox4" type="checkbox">
                                <label for="checkbox4">
                                    提醒<code>.checkbox-info</code>
                                </label>
                            </div>
                            <div class="checkbox checkbox-inline checkbox-warning">
                                <input checked id="checkbox5" type="checkbox">
                                <label for="checkbox5">
                                    警示<code>.checkbox-warning</code>
                                </label>
                            </div>
                            <div class="checkbox checkbox-inline checkbox-danger">
                                <input checked id="checkbox6" type="checkbox">
                                <label for="checkbox6">
                                    危险<code>.checkbox-danger</code>
                                </label>
                            </div>
                            <div class="checkbox checkbox-inline">
                                <input disabled id="checkbox7" type="checkbox">
                                <label for="checkbox7">
                                    禁用(以上样式通用)
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="radio radio-inline">
                            <input checked id="radio1" name="radio1" type="radio" value="option1">
                            <label for="radio1">
                                默认
                            </label>
                        </div>
                        <div class="radio radio-inline radio-primary">
                            <input id="radio2" name="radio1" type="radio" value="option2">
                            <label for="radio2">
                                常用<code>.radio-primary</code>
                            </label>
                        </div>
                        <div class="radio radio-inline radio-success">
                            <input id="radio3" name="radio1" type="radio" value="option3">
                            <label for="radio3">
                                绿色<code>.radio-success</code>
                            </label>
                        </div>
                        <div class="radio radio-inline radio-info">
                            <input id="radio5" name="radio1" type="radio" value="option5">
                            <label for="radio5">
                                提醒<code>.radio-info</code>
                            </label>
                        </div>
                        <div class="radio radio-inline radio-warning">
                            <input id="radio6" name="radio1" type="radio" value="option6">
                            <label for="radio6">
                                警示<code>.radio-warning</code>
                            </label>
                        </div>
                        <div class="radio radio-inline radio-danger">
                            <input id="radio4" name="radio1" type="radio" value="option4">
                            <label for="radio4">
                                危险<code>.radio-danger</code>
                            </label>
                        </div>
                        <div class="radio radio-inline">
                            <input disabled id="radio7" name="radio1" type="radio" value="option7">
                            <label for="radio7">
                                禁用(以上样式通用)
                            </label>
                        </div>
                    </div>
                </div>
                <h3>方框风格&图标<code>.input-group</code></h3>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon">姓名</span>
                                <input class="form-control" id="demo-nm" placeholder="请输入您的姓名..." type="text">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-language"></i></span>
                                <select class="form-control" id="demo-select-icons">
                                    <option>Java</option>
                                    <option>C#</option>
                                    <option>PHP</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <div class="input-group">
                                <input class="form-control" id="demo-user-email" placeholder="请输入您的gmail邮箱"
                                       type="email">
                                <span class="input-group-addon">@gmail.com</span>
                            </div>
                        </div>
                    </div>
                </div>

                <h3>日期和时间选择</h3>
                <p><a href="http://www.bootcss.com/p/bootstrap-datetimepicker/" target="_blank">访问官网</a>:集成脚本bootstrap-datepicker,使用<code>obj.datetimepicker({});</code>
                </p>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon">日期选择</span>
                                <input class="form-control" id="demo-date" placeholder="请选择日期.." type="text">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-4">
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon">日期&时间选择</span>
                                <input class="form-control" id="demo-datetime" placeholder="请选择日期.." type="text">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon">月份选择</span>
                                <input class="form-control" id="demo-date-span" placeholder="请选择月份.." type="text">
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
                <h3>带按钮的输入框(尺寸从大到小)</h3>
                <div class="row">
                    <div class="col-sm-4">
                        <p><code>.input-group-lg</code></p>
                        <div class="input-group input-group-lg">
                            <div class="input-group-btn">
                                <button class="btn btn-warning no-radius dropdown-toggle" data-toggle="dropdown"
                                        type="button">
                                    北京市
                                    <span class="fa fa-caret-down"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a href="#">上海市</a></li>
                                    <li><a href="#">天津市</a></li>
                                    <li><a href="#">西安市</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">其他城市</a></li>
                                </ul>
                            </div>
                            <!-- /btn-group -->
                            <input class="form-control no-radius" placeholder="请输入街道名称" type="text">
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="input-group">
                            <div class="input-group-btn">
                                <button class="btn btn-primary no-radius" type="button"><i class="fa fa-search"></i>
                                </button>
                            </div>
                            <!-- /btn-group -->
                            <input class="form-control no-radius" type="text">
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <p><code>.input-group-sm</code></p>
                        <div class="input-group input-group-sm">
                            <input class="form-control no-radius" type="text">
                            <div class="input-group-btn">
                                <button class="btn btn-default no-radius" type="button"><i class="fa fa-ellipsis-h"></i>
                                </button>
                            </div>
                            <!-- /btn-group -->
                        </div>
                    </div>
                </div>
                <h3>文本域</h3>
                <div class="row">
                    <div class="col-sm-12">
                        <textarea class="form-control" placeholder="请输入内容 ..." rows="3"></textarea>
                    </div>
                </div>
                <h3>文件或图片上传</h3>
                <p><a href="https://github.com/kartik-v/bootstrap-fileinput" target="_blank">访问官网</a>:集成bootstrap-fileinput,使用<code>obj.fileinput({})</code>
                </p>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <input class="file" data-min-file-count="2" data-overwrite-initial="false" id="file-haspreview-noradius"
                                   multiple type="file">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <input class="file" id="file-no-preview-simple" type="file">
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-image"></i></span>
                                <input class="file" id="file-no-preview-img" type="file">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <input class="file" id="file-no-preview-onlybtn" type="file">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/lanai-ui.js"></script>
<script src="../../plugins/validator/validator.js"></script>
<script type="text/javascript">
    $("#file-haspreview-noradius").fileinput({
        noRadius: true,
        showPreview: true,
        showUpload: false,
        showCaption: true,
        uploadUrl: '#', // you must set a valid URL here else you will get an error
        allowedFileExtensions: ['jpg', 'png', 'gif'],
        overwriteInitial: false,
        maxFileSize: 1000,
        maxFilesNum: 10,
        slugCallback: function (filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
    });
    $("#file-no-preview-simple").fileinput({
        showPreview: false,
        showUpload: false,
        showCaption: true,
        browseClass: 'btn btn-default'
    });
    $("#file-no-preview-img").fileinput({
        noRadius: true,
        showPreview: false
    });
    $("#file-no-preview-onlybtn").fileinput({
        showPreview: false,
        showUpload: false,
        showCaption: false,
        browseClass: 'btn btn-danger'
    });

    $(function () {
        $("#demo-date").datetimepicker({
            format: 'yyyy-mm-dd',//显示格式
            todayHighlight: 1,//今天高亮
            minView: "month",//设置只显示到月份
            startView: 2,
            forceParse: 0,
            showMeridian: 1,
            autoclose: 1//选择后自动关闭
        });//日期选择
        $("#demo-datetime").datetimepicker({
            format: 'yyyy-mm-dd HH:ii',//显示格式
            todayHighlight: 1,//今天高亮
            startView: 1,
            forceParse: 0,
            showMeridian: 1,
            autoclose: 1//选择后自动关闭
        });
        $("#demo-date-span").datetimepicker({
            format: 'mm',//显示格式
            startView: 3,
        });


        $("#form1").bootstrapValidator({
            fields: {
                demopassword: {/*键名username和input name值对应*/
                    message: '密码不能为空',
                    validators: {
                        notEmpty: {/*非空提示*/
                            message: '请输入密码'
                        }
                    }
                }
            }
        });
    });
</script>
</body>
</html>
